<template>
<h1>章节信息</h1>
  <el-button type="success" size="small"  @click="addChapter() " >添加章节</el-button>
  <div>
    <el-table :data="chapterList"  style="width: 100%">
      <el-table-column label="章节名" prop="chaName" width="280" />

      <el-table-column label="操作" width="500">
        <template #default="scope">

          <el-button type="success" size="small"  @click="chapterEdit(scope)" >编辑章节</el-button>
          <el-button type="success" size="small"  @click="addVideo(scope)" >上传视频</el-button>
          <el-button type="danger" size="small"  @click="delChapter(scope)" >删除章节</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:current-page="pageParam.pageNum"
        v-model:page-size="pageParam.pageSize"
        :page-sizes="[2, 5, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

  </div>
  <div>
    <el-dialog v-model="addChapterFormVisible" title="添加章节" center>
      <el-form >
        <el-form-item label="章节名称" :label-width="formLabelWidth">
          <el-input v-model="ChaName" autocomplete="off" />
        </el-form-item>
      </el-form>


      <template #footer>
			  <span class="dialog-footer">
			    <el-button @click="addChapterFormVisible = false">取消</el-button>
			    <el-button type="primary" @click="addChapterSure">
			      确认
			    </el-button>
			  </span>
      </template>
    </el-dialog>
  </div>




</template>

<script>
import {ref} from "vue";
import {ElNotification} from "element-plus";
import emitter from "../../../store/eventBus.js";
export default {
  name: "Chapter",
  data(){
    return{
      chaId:null,
      courseId:'',
      chapterList:[],
      addChapterFormVisible : ref(false),

      formLabelWidth : '140px',
      ChaName:'',
      pageParam:{
        pageSize:10,			//每页显示几条
        pageNum:1,
        param: {	//当前页数
          courseId: '',
        }
      },
      total:0,

    }
  },
  created() {
    this.init()
  },
  methods:{

    //能接收到课程id
    init(){

      this.courseId=this.$parent.courseId
      // console.log("11111111111111",this.courseId)
      let _this=this
      _this.pageParam.param.courseId=this.$parent.courseId

      let url="/studyadmin/chapter/chapterContent"
      _this.$axios.post(url,_this.pageParam).then(function(serverData){
        if(serverData.data.code===0){
          _this.chapterList=[];
          _this.total = serverData.data.total;
          _this.chapterList=serverData.data.data;
           // console.log("11111111111111",_this.chapterList)
        }
      })


    },
    handleSizeChange(val) {			//修改当前每页条目树
      this.pageParam.pageSize = val;
    },
    handleCurrentChange(val) {		//修改当前所在页数
      this.pageParam.pageNum = val;
    },
    //添加章节
    addChapter(){
      this.ChaName=''
      this.addChapterFormVisible = true;

    },

    //确认添加章节
    addChapterSure(){

      let _this=this

      let url="/studyadmin/chapter/addChapter"
      _this.$axios.get(url,{params:{courseId:_this.courseId,chaName:_this.ChaName}}).then(function(serverData){
        if(serverData.data.code===0){
          _this.init()
          ElNotification({
            title: "章节插入成功",
            message: serverData.data.msg,
            type: 'success',

          })
          _this.addChapterFormVisible = false;

          // _this.chapterList=serverData.data.data
        }else {
          ElNotification({
            title: "失败",
            message: serverData.data.msg,
            type: 'warning',

          })
        }
      })

    },
    delChapter(scope){
      let chaId=scope.row.chaId
      let _this=this
      let url="/studyadmin/chapter/delChapter"
      _this.$axios.get(url,{params:{chaId:chaId}}).then(function(serverData){
            if(serverData.data.code===0) {
              _this.init()
              ElNotification({
                title: "章节删除成功",
                message: serverData.data.msg,
                type: 'success',

              })
            }else{
              ElNotification({
                title: "章节删除成功",
                message: serverData.data.msg,
                type: 'error',

              })
            }
            })
    },


    //编辑章节
    chapterEdit(scope){
      // Bus.$emit('pass-value', scope.row.chaId);
      // 前面是事件，后面是要传入的参数
      // console.log("传入的参数",scope.row.chaId)
      // emitter.emit("response", scope.row.chaId)
      this.$parent.chaId=scope.row.chaId
      // this.$parent.chaId=scope.row.chaId
      this.$parent.active=1

    },
    //添加章节视频
    addVideo(scope){


      this.$parent.active=2
      this.$parent.chaId=scope.row.chaId
    }

  },
  watch:{
    pageParam:{			//当pageParam中参数发生变化时重新查询后端数据
      handler(newValue, oldValue) {
        this.init();
      },
      deep: true
    }
  },
  beforeMount() {
    this.init();
  },
}
</script>

<style scoped>

</style>